<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>circleSweepPass</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
    </style>
    <script src="./three.js"></script>
    <script src="./OrbitControls.js"></script>
    <script src="./stats.min.js"></script>
    <script src="./EffectComposer.js"></script>
    <script src="./RenderPass.js"></script>
    <script src="./ShaderPass.js"></script>
    <script src="./CopyShader.js"></script>
    <script src="./DepthFogPass2.js"></script>
  </head>
  <body></body>
  <script>
    var scene, camera, renderer, clock, controller, stats
    var composer, depthFogPass, depthTarget, topLeftVec, topRightVec, bottomLeftVec, bottomRightVec
    init();
    animate();

    // - Functions -
    function init() {
      scene = new THREE.Scene();
      clock = new THREE.Clock();
      camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        1,
        1000
      );
      camera.position.set(30, 30, 30)

      renderer = new THREE.WebGLRenderer({
        antialias: true, // 开启抗锯齿处理
        alpha: true,
      });
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.setPixelRatio(window.devicePixelRatio)

      var axisHelper = new THREE.AxesHelper(10);
      scene.add(axisHelper);

     
      var directionalLight = new THREE.DirectionalLight(0xffffff, 0.9);
      directionalLight.position.set(400, 200, 300);
      scene.add(directionalLight);
      // 方向光2
      var directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.9);
      directionalLight2.position.set(-400, -200, -300);
      scene.add(directionalLight2);
      //环境光
      var ambient = new THREE.AmbientLight(0x404040, 0.6);
      scene.add(ambient);

      stats = new Stats()
      document.body.appendChild( stats.dom );
      // --------

      var geometry = new THREE.PlaneBufferGeometry( 500, 500, 32 );
      var material = new THREE.MeshBasicMaterial( {color: 0x000000} );
      var plane = new THREE.Mesh( geometry, material );
      plane.rotation.x = -Math.PI/2
      scene.add( plane );

      let r = 500
      for(let i = 0;i < 1000;i++) {
        let height = 1 + Math.random() * 10
        let size = Math.random() * 2 + 0.5
        var m = new THREE.Mesh(new THREE.BoxBufferGeometry( size, height, size ), createRandomMaterial())
        m.position.set(r*(Math.random()-0.5), height/2, r*(Math.random()-0.5))
        m.rotation.y = Math.PI * Math.random()
        scene.add(m)
      }
      var options = {
        fogColor: new THREE.Color(0.85, 0.85, 0.85),
        fogLinearDis: 150
      }
      var renderScene = new THREE.RenderPass( scene, camera )
      depthFogPass = new THREE.DepthFogPass(scene, camera, options)
      composer = new THREE.EffectComposer( renderer );
      let scale = window.devicePixelRatio * 2 // 用于弥补后处理带来的图像精度损失
      composer.setSize( window.innerWidth * scale, window.innerHeight * scale );
      
      composer.addPass( renderScene )
      composer.addPass( depthFogPass )

      // --------

      controller = new THREE.OrbitControls(camera, renderer.domElement);
      document.body.appendChild(renderer.domElement);
      window.onresize = onResize;
    }

    function createRandomMaterial() {
        return new THREE.MeshPhongMaterial({color: Math.floor(Math.random()*(1<<24))})
    }

    function animate() {
      requestAnimationFrame(animate);
        
      composer.render()
      stats.update();
      controller.update(clock.getDelta());
      
    }

    function ang2rad(ang){
      // 角度变弧度
      return (ang * Math.PI) / 180;
    };
   

    function onResize() {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    }
  </script>
</html>
